<template>
  <div class="box">
    <!-- 左边 -->
    <div class="left">
      <el-tree
        :data="tree"
        :props="Props"
        node-key="id"
        @node-click="handleNodeClick"
        :highlight-current="true"
      ></el-tree>
    </div>
    <div class="right">
      <el-row type="flex" justify="space-between" class="top">
        <span>作业范围</span>
        <el-button type="danger" v-if="edit" @click="edits">编辑</el-button>
        <div v-else>
          <el-button type="danger" @click="tijiao">提交</el-button>
          <el-button @click="closeEdit">取消</el-button>
        </div>
      </el-row>
      <div class="text">
        <span>地区关键词：</span>
        <el-input
          v-model="location"
          placeholder="请输入内容"
          style="width: 200px"
        ></el-input>
        <div>
          <el-button type="danger" v-if="!edit" v-show="edit1" @click="openEdit"
            >开始绘制</el-button
          >
          <el-button type="danger" v-show="!edit1" @click="wancheng()"
            >完成绘制</el-button
          >
          <el-button type="danger" v-show="!edit1">删除围栏</el-button>
        </div>
      </div>
      <baidu-map class="map" :center="center" :zoom="10" @ready="handler">
        <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
        <bm-polygon
          :edit="false"
          :path="polygonPath"
          :stroke-opacity="0.5"
          :stroke-weight="2"
          :editing="editing"
          stroke-color="#e85552"
          fill-color="rgba(232,85,82,0.30)"
          @lineupdate="updatePolygonPath"
        />
       
      </baidu-map>
    </div>
  </div>
</template>

<script>
import {
  getBusinessTreeApi,
  getshujuScope,
  getbaocuncope,
} from "@/api/institutions-jobs-area";
export default {
  name: "institutions-jobs-area",
  data() {
    return {
      tree: [],
      Props: {
        label: "name",
        children: "children",
      },
      editing: false,
      polygonPath: [{}],
      location: '上海',
      keyword:'高德',
      myMap: "",
      edit: true,
      edit1: true,
      //面对象
      polygon: {},
      //区域数据center
      center: {
        lat: 0,
        lng: 0,
      },
      zoom: 0,
    };
  },
  created() {
    this.getBusinessTree();
  },
  mounted() {},
  methods: {
    seach() {
      this.getBusinessTree();
    },
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 123.438316;
      this.center.lat = 41.885717;
    },
    initMap() {},
    //开启地图编辑
    openEdit() {
      this.edit1 = !this.edit1;
      this.editing = true;
    },
    wancheng() {
      this.editing = false;
    },
    //取消地图编辑
    closeEdit() {
      this.edit = !this.edit;
      this.edit1 = !this.edit1;
    },
    //获取树状机构信息
    async getBusinessTree() {
      const res = await getBusinessTreeApi();
      // JSON.parse将字符串转化为数组,JSON.stringify相反
      const a = JSON.parse(res.data);
      console.log(a);
      this.tree = a;
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath();
      // console.log(this.polygonPath)
    },
    // 添加多边形路径点
    addPolygonPoint(e) {
      this.polygonPath.push(e.point);
    },
    //共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
    handleNodeClick(a) {
      console.log(a);
      this.getMapScope({ 0: a.id }, a.id);
    },
    edits() {
      this.edit = false;
    },
    //获取地图业务范围
    async getMapScope(params, id) {
      const res = await getshujuScope(params, id);
      console.log(res.data);
      this.polygon = res.data;
      if (res.data.polygon) {
        res.data.polygon = res.data.polygon.map((item) => {
          item.lng = item.longitude;
          item.lat = item.latitude;
          return item;
        });
      }
      this.center.lng = res.data.longitude;
      this.center.lat = res.data.latitude;
      if (res.data.polygon) {
        this.polygonPath = res.data.polygon;
      }
    },
    async tijiao() {
      const res = await getbaocuncope(this.polygon);
      console.log(res);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  .left {
    display: inline-block;
    height: 820px;
    width: 214px;
    background: #fff;
  }
  .right {
    height: 820px;
    width: 1037px;
    background: #fff;
    .top {
      height: 60px;
      line-height: 60px;
      padding-left: 25px;
      display: flex;
      align-items: center;
      padding-right: 50px;
      span {
        font-size: 16px;
        font-weight: 700;
        color: #2a2929;
      }
      button {
        width: 90px;
        height: 36px;
      }
    }
    .text {
      padding-left: 25px;
      color: #20232a;
      font-weight: 400;
      font-size: 14px;
    }
    .map {
      width: 997px;
      height: 668px;
      background-color: rgb(255, 255, 0);
      margin: 10px 0 0 25px;
      border: 1px solid #ccc;
    }
  }
}
</style>